<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
    Vue3 开始新增了 组合式API 风格，在 Vue3 之前 风格是 选项式API

   -->

  <script>
    // 选项式
    const root1 = {
      data() {

      },

      computed: {},

      methods: {},

      watch: {}
    }

    // 组合式, 下面代码需要使用在 .vue 文件中
    <script setup>
      // 创建数据
      const msg = ref(10)
      
      // 定义方法
      const increment = () => {}
    </script>

    // 选项式 + 组合式

    const root2 = {
      data() {},

      setup() {
        // 在这个选项下来写组合式API
        // 创建数据
        const msg = ref(10)
        
        // 定义方法
        const increment = () => {}
      }
    }
  </script>
</body>
</html>